<template>
  <div class="app-container">
    <div class="app-toolbar app-position-a"><el-button icon="el-icon-download" type="primary" @click="exportFile">导出数据</el-button></div>
    <div class="app-condition">
      <div class="app-condition-lable">导出条件筛选：</div>
      <div class="app-condition-where">
        <el-form :inline="true" :model="params" class="demo-form-inline">
          <el-form-item label="选择用户">
            <el-input
              prefix-icon="el-icon-user"
              placeholder="请输入用户名称"
              v-model="params.userName">
            </el-input>
          </el-form-item>
          <el-form-item label="时间">
            <el-row>
              <el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="params.startTime" style="width: 100%;"></el-date-picker></el-col>
              <el-col :span="1">-</el-col>
              <el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="params.endTime" style="width: 100%;"></el-date-picker></el-col>
            </el-row>
          </el-form-item>
          <el-form-item><el-button type="primary" @click="_formDialogConfirm">查询</el-button></el-form-item>
        </el-form>
      </div>
    </div>
    <div class="app-statistic">
      <el-row>
        <el-col :span="2">统计：</el-col>
        <el-col :span="6">用户：{{ userBillDatas.length }}</el-col>
        <el-col :span="14">
          收益总合计：
          <span class="el-price">{{priceTotal}}</span>
          元
        </el-col>
      </el-row>
    </div>
    <div class="app-table-body">
      <div v-for="(item, k) in userBillDatas" class="app-table-item">
        <div class="app-table-title">用户名：{{ item.userName }}</div>
        <el-table :data="item.children" style="width: 100%" border>
          <el-table-column label="序号" width="80" align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="commodityName" align="center"></el-table-column>
          <el-table-column label="服务方式" width="120" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.beOverdue == 1">
                免费
              </template>
              <template v-else-if="scope.row.beOverdue == 2">
                包月
              </template>
              <template v-else-if="scope.row.beOverdue == 3">
                包年
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价" width="100" align="center"></el-table-column>
          <el-table-column prop="payCount" label="购买数量" width="80" align="center"></el-table-column>
          <el-table-column prop="sumTotal" label="交易金额" width="120" align="center"></el-table-column>
          <el-table-column prop="orderNo" label="订单编号" width="240" align="center"></el-table-column>
          <el-table-column prop="transactionId" label="交易编号" width="240" align="center"></el-table-column>
          <el-table-column prop="payTime" label="交易时间" width="240" align="center"></el-table-column>
        </el-table>
      </div>
      <!-- <el-divider></el-divider>
      <div class="app-table-item">
        <div class="app-table-title">用户名：可可西里培训学校</div>
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
          <el-table-column prop="title" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="service" label="服务方式" width="120" align="center"></el-table-column>
          <el-table-column prop="price" label="单价" width="100" align="center"></el-table-column>
          <el-table-column prop="number" label="购买数量" width="80" align="center"></el-table-column>
          <el-table-column prop="total" label="交易金额" width="120" align="center"></el-table-column>
          <el-table-column prop="order_sn" label="订单编号" width="240" align="center"></el-table-column>
          <el-table-column prop="pay_sn" label="交易编号" width="240" align="center"></el-table-column>
          <el-table-column prop="pay_time" label="交易时间" width="240" align="center"></el-table-column>
        </el-table>
      </div> -->
    </div>
  </div>
</template>
<script src="./index.js"></script>
<style lang="scss" src="./index.scss"></style>
<style lang="scss" scoped src="./index.scoped.scss"></style>
